﻿#include('/header.html', {title : '题目列表'})
<div class="es-wrap">
  <div id="content-container" class="container">
    #include('header.html')
    <div class="row">
      <div class="col-md-3">
        <div class="sidenav locked js-sidenav" data-course-length="1">
          #include('sideMenu.html', {practice : 'active'})
        </div>
      </div>

      <!--题目增改模态框-->
      <div id="modal" class="modal">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                <i class="cd-icon cd-icon-close"></i>
              </button>
              <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body height-100">
              <div class="load-animation"></div>
              <!--添加题目-->
            </div>
          </div>
        </div>
      </div>
      <!--题目增改模态框结束-->

      <div class="col-md-9" id="exercise-vm">
        <!--题目管理列表-->
        <div class="panel panel-default panel-col">
          <div class="panel-heading">
            <span class="panel-title">题目管理</span>
            <div class="pull-right" id="addQueBtn">
              <span @click="setQue(0)" class="btn btn-info btn-sm">
                <span class="es-icon es-icon-anonymous-iconfont"></span> 选择题
              </span>
              <span @click="setQue(1)" class="btn btn-info btn-sm">
                <span class="es-icon es-icon-anonymous-iconfont"></span> 多选题
              </span>
              <!--<span @click="setQue(2)" class="btn btn-info btn-sm">
                <span class="es-icon es-icon-anonymous-iconfont"></span> 问答题
              </span>-->
            </div>
          </div>

          <div class="panel-body " id="quiz-table-container">
            <!--题目搜索框-->
            <form class="form-inline well well-sm" @submit.prevent="search_">
              <div class="form-group">
                <select class="form-control" v-model="query.type">
                  <option value="">--按题型--</option>
                  <option value="0">单选题</option>
                  <option value="1">多选题</option>
                  <!--<option value="2">问答题</option>-->
                  <!--<option value="uncertain_choice">不定项选择题</option>-->
                  <!--<option value="determine">判断题</option>-->
                  <!--<option value="fill">填空题</option>-->
                  <!--<option value="material">材料题</option>-->
                </select>
              </div>
              <div class="form-group">
                <select class="form-control" v-model="query.tid">
                  <option value="">--按课程--</option>
                  <option v-for="(t, index) in tasks" :value="t.id">{{t.name}}</option>
                </select>
              </div>
              <div class="form-group">
                <input class="form-control width-150" placeholder="关键字" v-model="query.key">
              </div>
              <button class="btn btn-primary btn-sm">搜索</button>
            </form>

            <!--题目列表-->
            <table class="table table-striped table-hover" id="quiz-table">
              <thead>
              <tr>
                <th>序号</th>
                <th>题干</th>
                <th>类型</th>
                <th>从属于</th>
                <th>最后更新</th>
                <th style="width: 125px;">操作</th>
              </tr>
              </thead>
              <tbody>
              <tr is="pra-tr" v-for="(pra, index) in practices" :key="pra.id"
                  :pra="pra" :index="index" :look="lookQue" :edit="setQue"></tr>
              <!--空题目显示-->
              <tr v-show="practices.length <= 0">
                <td colspan="20">
                  <div class="empty">一道题都没有，请点击右上角按钮，按不同的题型录入题目</div>
                </td>
              </tr>
              </tbody>
            </table>
            <!--分页-->
            <div v-if="page.totalPages>1" class="text-center">
              <navigation :pages="page.totalPages" :current.sync="page.pageNum"
                          @navpage="gotoPage"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <template id="pra-tr">
    <tr>
      <td>
        {{index+1}}
      </td>
      <td style="max-width: 200px;">
        <span class="cutting width-180">{{pra.stem}}</span>
      </td>
      <td>
        <span v-if="pra.type==0" class="label label-info">单选题</span>
        <span v-if="pra.type==1" class="label label-success">多选题</span>
        <span v-if="pra.type==2" class="label label-default">问答题</span>
      </td>
      <td>
        <span v-if="pra.task==null">本课程</span>
        <span v-else-if="pra.task!=null">{{pra.task.name}}</span>
      </td>
      <td>
        <span class="color-gray text-sm">{{pra.time.substr(0, 16)}}</span>
      </td>
      <td>
        <button class="btn btn-info btn-xs" @click="look(index)">预览</button>
        <span class="dropdown">
          <button class="dropdown-toggle btn btn-success btn-xs" data-toggle="dropdown">
            更多<i class="es-icon es-icon-arrowdropdown"></i>
          </button>
          <ul class="dropdown-menu pull-right">
            <li>
              <a href="javascript:" @click="edit(0, index)">
                <span class="glyphicon glyphicon-edit mrm"></span> 编辑</a>
            </li>
            <li>
              <a href="javascript:" @click="delete_">
                <span class="es-icon es-icon-delete mrm"></span> 删除</a>
            </li>
          </ul>
        </span>
      </td>
    </tr>
  </template>
  <script>
    var praVm = new Vue({
      el: '#exercise-vm',
      data: {
        tasks: [],
        practices: [],
        query: {
          tid: '',
          type: '',
          key: ''
        },
        page: {
          pageNum: 1,
          totalPages: 1,
          limit: 10,
          totalRows: 0
        },
        modalTitle: '题目添加',
        // 题目信息
        practice: {
          id: 0, // 题目id
          type: 1, // 类型
          taskId: 0,
          options: []
        },
        modalUrl: 'exercises/set'
      },
      methods: {
        search_: function() {
          this.getPractices();
        },
        gotoPage: function(i) {
          this.page.pageNum = i;
        },
        getPractices: function() {
          var self = this;
          $.post('/course/practice/api/${kid}/page', $.extend({page: self.page.pageNum}, this.query), function (data) {
            self.practices=[];
            if (data.success) {
              self.practices = data.payload.rows;
              self.page.pageNum = data.payload.pageNum;
              self.page.totalPages = data.payload.totalPages;
              self.page.limit = data.payload.limit;
              self.page.totalRows = data.payload.totalRows;
            }
          });
        },
        // 添加/修改题目
        setQue: function (type, index) {
          if (index === undefined) {
            this.modalTitle = '题目添加';
            this.practice.type = type;
          } else {
            this.modalTitle = '题目修改';
            this.practice = this.practices[index];
          }
          this.modalUrl = 'practice/set';
          $('#modal').modal('show');
        },
        // 预览题目
        lookQue: function (index) {
          this.practice = this.practices[index];
          this.modalTitle = '题目浏览';
          this.modalUrl = '/practice/${kid}/look/'+this.practice.id;
          $('#modal').modal('show');
        }
      },
      watch: {
        modalTitle: function (nv) {
          $('#modal .modal-title').html(nv);
        },
        'page.pageNum': function (nv) {
          this.getPractices();
        }
      },
      components: {
        'pra-tr': {
          props: ['pra', 'index', 'look', 'edit'],
          template: '#pra-tr',
          methods: {
            delete_: function () {
              var self = this;
              $.post("/course/set/practice/${kid}/delete/"+self.pra.id, function (data) {
                if (data.success) {
                  self.$root.practices.splice(self.index, 1);
                  layer.msg('删除成功！', {time: 1200, icon: 6});
                  if (self.$root.practices.length <= 0) self.$root.page.pageNum--;
                  self.$root.getPractices();
                } else layer.msg('删除失败！' + data.msg, {icon:5, time:1200})
              })
            }
          }
        }
      },
      created: function () {
        var self = this;
        $.post('/course/task/api/${kid}/page', {status: 1, size: 10000}, function (data) {
          if (data.success) {
            self.tasks = data.payload.rows;
          }
        });
        self.getPractices();
      }
    });

    function hide() {
      $('#modal').modal('hide');
    }

    $('#modal').on('show.bs.modal', function (e) {
      $.post(praVm.modalUrl, function (html) {
        $(e.target).find('.modal-body').html(html);
      });
    }).on('hidden.bs.modal', function (e) {
      praVm.practice = {id: 0, type: 1, taskId: 0};
      $(this).find('.modal-body').html('<div class="load-animation"></div>');
    });
  </script>
</div>

#include('/footer.html')